<template>
  <el-dialog
    title="关联报废单"
    :visible.sync="show"
    width="400px"
    top="10px"
    custom-class="goods-manage-dialog"
    :modal-append-to-body="false"
    :append-to-body="false"
    :before-close="handleClose">
    <div class="wh100">
      <div class="search-row">
        <div class="flex-center">
          <el-input v-model="formData.gmName" placeholder="请输入报废单号" suffix-icon="el-icon-search" style="width: 280px !important;"></el-input>
          <el-button type="primary" class="search-btn" @click="search">查询</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table
          class="scrap-table"
          :header-cell-style="{background:'#fafafa',color:'#565551'}"
          max-height="100%"
          height="100%"
          border
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="documentNumber"
            label="报废单号"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="110"
          >
            <template slot-scope="scope">
              <span class="audit-history-btn" @click="openScrapHistory(scope.row)">审核历史</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-page">
        <span class="total">共{{ listPage.total }}条数据</span>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="listPage.total"
          @current-change="handleCurrentChangeList"
          @handleSizeChange="handleSizeChangeList"
          :page-size="listPage.pageSize"
          :current-page="listPage.pageNo"
          :pager-count="5"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="danger" @click="save" class="rbtn">确定</el-button>
    </span>
    <scrap-history
      v-if="scrapHistoryModal.show"
      :assets-data="scrapHistoryModal.assetsData"
      @close="closeScrapHistory"
    ></scrap-history>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import moment from 'moment'
import scrapHistory from "./scrapHistory.vue";
export default {
  components: {
    scrapHistory
  },
  name: "",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    info: {
      type: Object,
      default: ()=>{}
    },
  },
  data() {
    return {
      addType: '1',
      formData: {
        gmName: '',
        gmType: '',
      },
      gmTypeList: [],
      tableData: [],
      tableSelectedRow: [],//选中的
      listPage: {
        total: 0,
        pageSize: 10,
        pageNo: 1,
      },
      scrapHistoryModal: {
        show: false,
        assetsData: {},
      },
    }
  },
  computed: {
  },
  mounted() {
    this.search()
  },
  methods: {
    handleClose() {
      this.$emit('close',false)
    },
    save(row) {
      if(this.tableSelectedRow.length === 0){
        return this.$showMsg('请先选择一条数据', 'warning')
      }
      this.$emit('close',true, this.tableSelectedRow)
    },
    //查询地址
    search(){
      this.tableData = [
        { documentNumber: 'SQ-BF202312050787' },
        { documentNumber: 'SQ-BF202312050788' },
        { documentNumber: 'SQ-BF202312050789' },
        { documentNumber: 'SQ-BF202312050790' },
        { documentNumber: 'SQ-BF202312050791' },
        { documentNumber: 'SQ-BF202312050792' },
        { documentNumber: 'SQ-BF202312050793' },
        { documentNumber: 'SQ-BF202312050794' },
        { documentNumber: 'SQ-BF202312050795' },
        { documentNumber: 'SQ-BF202312050796' },
      ]
    },
    //切换添加方式
    changeAddType(tab,event) {
      this.addType = tab.name
    },
    handleSelectionChange(val) {
      this.tableSelectedRow = val
    },
    //分页
    handleCurrentChangeList(val) {
      this.listPage.pageNo = val
      this.search()
    },
    handleSizeChangeList(val) {
      this.listPage.pageSize = val
      this.search()
    },
    //报废单审核历史
    openScrapHistory(row) {
      this.scrapHistoryModal.assetsData = this.$utilJs.deepClone(row)
      this.scrapHistoryModal.show = true
    },
    closeScrapHistory() {
      this.scrapHistoryModal.show = false
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
/deep/ .goods-manage-dialog {
  height: calc(100% - 20px);
  margin-bottom: 0;
  .el-dialog__body {
    height: calc(100% - 124px);
    padding: 0 20px;
  }
}
.wh100 {
  width: 100%;
  height: 100%;
  .search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .flex-center {
      display: flex;
      align-items: center;
      .search-btn {
        margin-left: 8px;
      }
    }
  }
  .table-box {
    width: 100%;
    height: calc(100% - 104px);
    .scrap-table {
      width: 100%;
      margin-top: 16px;
      border-radius: 6px;
      /deep/ .audit-history-btn {
        color: @ntalkColor;
        cursor: pointer;
      }
    }
  }
  .table-page {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    border-top: 1px solid #f2f3f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    .total {
      color: rgba(0,0,0,0.66);
      font-size: 14px;
      line-height: 22px;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: @ntalkColor;
    }
    /deep/ .el-pagination.is-background .el-pager li.active {
      background-color: @ntalkColor;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: @ntalkColor;
    }
    /deep/ .el-pagination.is-background .el-pager li:hover {
      color: @ntalkColor;
    }
  }
}
.rbtn {
  background-color: @ntalkColor !important;
  border-color: @ntalkColor !important;
}
</style>
